<template>
	<view :class="currentTheme">
		<a-nabbar name="验票"/>
		<view class="tab-box">
			<me-tabs v-model="indexCurrent"  @tabTop="getTabTop" :height="88" :tabs="tabs" @change="tabGetChange" :activeColor="currentThemeObj.primary" ></me-tabs>
		</view>
		<swiper :indicator-dots="false" :autoplay="false" :style="swiperStyle"  :duration="300" :current="tabIndex" @change="getChange">
			<!-- 直接验票 -->
			<swiper-item >
				<view class="u-padding-32">
					<item-box :paddinglr="40">
						<label-box label="验票码" label-position="center" labelSize="32">
							<u-input v-model="form.ticket" :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" placeholder="请输入验票码" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
						</label-box>
					</item-box>
					<!-- 二维码 getinfo接口能获取到二维码才说明是绑定成功-->
					<view class="qrcode-box u-position-fixed u-flex u-row-center" v-if="loginForm.ticket">
						<Qrcode
							ref="qrcode"
							:val="QRValue"
							:size="290"
							:showLoading="false" />
							<view class="u-position-absolute qrcode-logo u-flex u-row-center">
								<u-image width="90" height="90" border-radius="10" src="https://larp-gbo.oss-cn-chengdu.aliyuncs.com/larp/common-light/logo.png"></u-image>
							</view>
					</view>
					<!-- 发行 -->
					<view class="save-btn u-position-fixed  u-padding-left-32 u-padding-right-32" v-if="loginForm.userType =='issue'">
							<item-btn  @click="setTicket" :loading="loading" width="100%" height="88">
								<text class="u-font-28">验证</text>
							</item-btn>
							<view class="u-margin-top-40">
								<item-btn @click="storeBind" type="plain" :loading="loading"  width="100%" height="88">
									<text class="content-desc-item u-font-28">店家票绑定</text>
								</item-btn>
							</view>
					</view>
					<!-- 店家 -->
					<view class="save-btn-shop u-position-fixed  u-padding-left-32 u-padding-right-32" v-else>
						<item-btn  @click="setTicket" :loading="loading" width="100%" height="88">
								<text class="u-font-28">验证</text>
							</item-btn>
					</view>
				</view>
			</swiper-item>
			<!-- 手机号验票 -->
			<swiper-item >
				<view>
					<view class="u-padding-32">
						<item-box :paddinglr="40">
							<label-box label="手机号" label-position="center" labelSize="32">
								<u-input v-model="form.phone" :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" placeholder="请输入手机号" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
							</label-box>
							<label-box label="验证码" label-position="center" labelSize="32">
								<view class="u-flex">
									<view class="u-flex-1 u-margin-right-34">
										<u-input v-model="form.code"  :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" placeholder="请输入验证码" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
									</view>
									<!-- <u-button shape="circle" @click="getCodeVali"  hover-class="none" size="mini" :disabled="time>0" :custom-style="{backgroundColor:'#765CFE',color:'#765CFE',width:'162rpx',height:'66rpx',marginLeft:'34rpx',fontSize:'24rpx'}">
										<text class="text-white">{{timeTxt}}</text>
									</u-button> -->
									<view>
										<item-btn  @click="getCodeVali" width="162" height="66">
											<text class="u-font-28">{{timeTxt}}</text>
										</item-btn>
									</view>
								</view>
							</label-box>
						</item-box>

						<!-- 二维码 getinfo接口能获取到二维码才说明是绑定成功-->
						<view class="qrcode-box u-position-fixed u-flex u-row-center" v-if="loginForm.ticket">
							<Qrcode
								ref="qrcode2"
								:val="QRValue"
								:size="290"
								:showLoading="false" />
							<view class="u-position-absolute qrcode-logo u-flex u-row-center">
								<u-image width="90" height="90" border-radius="10" src="https://larp-gbo.oss-cn-chengdu.aliyuncs.com/larp/common-light/logo.png"></u-image>
							</view>
						</view>
						<view class="save-btn-phone u-position-fixed  u-padding-left-32 u-padding-right-32">
							<item-btn  @click="getCodeOfPhone" :loading="loading" width="100%" height="88">
								<text class="u-font-28">查询</text>
							</item-btn>
							<view class="u-text-center text-see" @click="showOrderList">查看验票码</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 弹框 -->
		<u-popup v-model="showOrderListModel" mode="center" border-radius="14" closeable>
			<view class="u-text-center u-font-30 u-padding-32 text-black bg-white tiket-title">验票码</view>
			<view class="bg-white">
				<scroll-view scroll-y="true" style="height: 30vh;width: 70vw;">
						<view class="tikets-box" v-for="(item,i) in tiketLists" :key="i">
								<view class="u-flex tickes-lists u-row-center">
									<view class="ticket-code u-flex-1">验票码：{{item.number}}</view>
									<view class="isBind" @click="bindTiket(item.number)">{{item.isBind=='1'?'':'绑定'}}</view>
									<view class="copy-text" @click="copyTiket(item.number)">复制</view>
								</view>
						</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {add} from '@/api/crud.js'
	import time from '@/mixins/validateCodeTime.js'
	import swiperList from '@/mixins/swiperList.js'
	import Qrcode from 'tki-qrcode/components/tki-qrcode/tki-qrcode.vue'
	import {validateTicketSms,getTicketByUid} from '@/api/ticket'
	import Base64 from 'base-64';
	import pageMixins from '@/pages/pageMixins.js'

	export default {
		mixins:[time,swiperList,pageMixins],
		components: {
			Qrcode
		},
		data() {
			return {
				form:{
					ticket:'',
					phone:'',
					code:''
				},
				loading:false,
				top:'48rpx',
				isOrder:true,
				tabs:[{name:'验票码'},{name:'手机号'}],
				showOrderListModel:false,
				tiketLists:[],//验票码列表
			};
		},
		computed: {
			QRValue() {
				const {exhibitId,ticket} = this.loginForm
				return Base64.encode(`${exhibitId},${ticket},wuxiaowuxiaobuzhichizhongwen`);
				// return this.loginForm.exhibitId+','+this.loginForm.ticket;
			}
		},
		onLoad() {
			this.form.ticket = this.$store.getters.loginForm.ticket
			console.log(this.loginForm.exhibitId+','+this.loginForm.ticket)
		},
		mounted() {
			if(this.loginForm.ticket && this.loginForm.exhibitId){
				this.$refs.qrcode._makeCode()
				this.$refs.qrcode2._makeCode()
			}
		},
		methods: {
			setTicket() {
				if(!this.form.ticket) {
					this.$u.toast('请填写展会订单号')
					return false;
				}
				add(this.form.ticket,'user','shopApi','testTicket/'+this.$store.getters.loginForm.uid).then(res=>{
					if(res){
						this.$u.toast('绑定成功');
						this.$store.dispatch('getInfo')
						setTimeout(()=> {
							this.$u.route({type:"back"})
						}, 1500);
					}else{
						this.$u.toast('订单号校验失败');
					}
				})
			},
			storeBind(){
				this.$u.route({url:'/pagesA/bindStoreBill/bindStoreBill'})
			},
			//通过手机号和验证码查询订单
			getCodeOfPhone(){
				if(!this.$u.test.mobile(this.form.phone)){
					this.$u.toast('手机号码不正确')
					return false;
				}
				if(!this.form.code){
					this.$u.toast('验证码不能为空')
					return false;
				}
				validateTicketSms({
					// ...this.form,
					phone:this.form.phone,
					code:this.form.code,
					exhibitId:this.loginForm.exhibitId,
					// exhibitId:10,
					type:5
				}).then(res=>{
					//获取数据
					this.$u.toast('查询成功');
					this.showOrderListModel=true;
					this.tiketLists=res;
				})
			},
			//获取验证码
			getCodeVali(){
				if(!this.$u.test.mobile(this.form.phone)){
					this.$u.toast('手机号码不正确')
					return false;
				}
				this.getCode({
					phone:this.form.phone,
					type:5
				})
			},
			// 查看验票码列表
			showOrderList(){
				this.showOrderListModel= true;
					getTicketByUid({
					exhibitId:this.loginForm.exhibitId,
					// exhibitId:10
				}).then(res=>{
					//获取数据
					this.showOrderListModel=true;
					this.tiketLists=res;
				})
			},
			//复制验票码
			copyTiket(wxId){
				if(!wxId) return false;
				uni.setClipboardData({
					data: wxId,
					success:()=>{
						this.$u.toast('复制成功')
					}
				});
			},
			//通过短信获取的验票码  来绑定
			bindTiket(item){
				this.form.ticket = item;
				setTimeout(()=>{
					this.setTicket();
				},100)
			}
		},
	}
</script>

<style lang="scss" scoped>
.form-label{
	width: 140rpx;
	color: white;
	font-size: 32rpx;
	letter-spacing: 5px;
}
.save-btn{
	bottom: 60rpx;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
}
.save-btn-shop{
	bottom: 140rpx;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
}
.save-btn-phone{
	bottom: 50rpx;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
}
.qrcode-box{
	width: 330rpx;
	height: 330rpx;
	background-color: white;
	bottom: 430rpx;
	left: 50%;
	margin-left: -165rpx;
}
.text-see{
	color: #765CFE;
	margin-top: 32rpx;
	font-size: 24rpx;
}

.tiket-title{
	border-bottom:1rpx solid var(--line-color);
}

.tikets-box{
	color: white;
	.tickes-lists{
		height: 100rpx;
		line-height: 100rpx;
		// border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
		border-bottom:1rpx solid var(--line-color);
		padding:0 28rpx;
		.ticket-code{
			// color: #CCCCCC;
			color: #919191;
			font-size: 26rpx;
		}
		.isBind{
			// color: #FCFCFC;
			color: #161324;
			font-size: 30rpx;
			margin-right:20rpx;
		}
		.copy-text{
			color: #765CFE;
			font-size: 30rpx;
		}
	}
	// &:last-child{
	// 	.tickes-lists{
	// 		border-bottom: none;
	// 	}
	// }
}
.qrcode-logo{
	width: 105rpx;
	height: 105rpx;
	border: 1rpx solid #000;
	border-radius: 10rpx;
	background-color: white;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
</style>
